<div class="container-fluid p-4">
    <div class="row">
        <div class="col-auto">
            <input type="file" class="nr-txt-file mb-3 " multiple accept="image/*">
        </div>
        <div class="col-auto">
            <sl-select class="nr-se-type" value="text" style="width:9em">
                <sl-menu-item value="text">添加文字</sl-menu-item>
                <sl-menu-item value="image">添加图片</sl-menu-item>
            </sl-select>
        </div>
    </div>
    <div class="nr-cog-text row">
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-content" label="水印内容" value="Watermark 水印"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-font-size" label="字体样式" value="36px Josefin Slab"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <div>字体颜色</div>
            <sl-color-picker class="nr-txt-color" label="字体颜色" value="#000000"></sl-color-picker>
        </div>

        <div class="col-auto mb-3">
            <sl-input class="nr-txt-x" label="X轴（%）" type="number" min="-100" max="200" step="1" value="3"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-y" label="Y轴（%）" type="number" min="-100" max="200" step="1" value="7"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-alpha" label="透明度" type="number" value="0.7" min="0" max="1" step="0.1"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-angle" label="角度" type="number" value="0" min="-360" max="360" step="5"></sl-input>
        </div>
    </div>
    <div class="nr-cog-image row d-none">
        <div class="col-auto mb-3">
            <div>选择图片</div>
            <input type="file" class="nr-txt-logo" accept="image/*">
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-logo-width" label="图宽（%）" type="number" min="-400" max="400" step="1" value="100"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-logo-height" label="图高（%）" type="number" min="-400" max="400" step="1" value="100"></sl-input>
        </div>

        <div class="col-auto mb-3">
            <sl-input class="nr-txt-x" label="X轴（%）" type="number" min="-100" max="200" step="1" value="3"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-y" label="Y轴（%）" type="number" min="-100" max="200" step="1" value="7"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-alpha" label="透明度" type="number" value="0.7" min="0" max="1" step="0.1"></sl-input>
        </div>
        <div class="col-auto mb-3">
            <sl-input class="nr-txt-angle" label="角度" type="number" value="0" min="-360" max="360" step="5"></sl-input>
        </div>
    </div>
    <div class="nr-card-result row"></div>
</div>

@Html.Raw(Netnr.QuoteTo.Html("watermark.js"))